<template>
	<div id="settle_accounts">
		<toptitle :conter="'设置'" :bgcolor="'#f00'"></toptitle>
		<div class="addresskong" v-if="result.length == 0" @click="address()">
			<p>暂无收货地址，请设置收货地址！</p>
		</div>
		<div class="address" v-if="result.length != 0">
			<div class="li" v-for="(item,index) in result" :key="index" v-if="item.is_select">
				<div class="le">
					<h3><span>{{item.name}}</span>&emsp;&emsp;<span>{{ item.phone }}</span></h3>
					<p><span>[默认]</span>{{ item.a_provice+item.a_city+item.a_code}}{{ item.a_desc }}</p>
				</div>
				<div class="ri">
					<span class="iconfont icon-xiangyoujiantou"></span>
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 订单列表 -->
			<div class="list">
				<div class="li" v-for="(item,index) in list" :key="index">
					<div class="top">
						<div class="le">
							<img :src="item.pro_img" alt="">
						</div>
						<div class="ri">
							<h5>{{ item.pro_title }}</h5>
							<p>{{ item.pro_sku[1].type_text }} {{ item.pro_sku[1].model_text }}</p>
							<p>
								<span>
									<span>￥{{ item.pro_price }}</span>
									<span class="iconfont icon-chenghao">{{ item.pro_num }}</span>
								</span>
								<span>不支持到店铺核销</span>
							</p>
						</div>
					</div>
					<ul class="conter">
						<li>
							<span>配送方式</span>
							<span>快递配送</span>
						</li>
						<li>
							<span>快递费用</span>
							<span>免运费</span>
						</li>
						<li>
							<span>店铺优惠卷</span>
							<span>暂无优惠卷</span>
						</li>
						<li>
							<span>备注信息</span>
							<span>快递配送</span>
						</li>
					</ul>
					<div class="bott">
						<p>共{{ item.pro_num }}件&ensp;小计<span>￥{{ Number(item.pro_num) * Number(item.pro_price) }}</span>
						</p>
					</div>
				</div>
			</div>
			<!-- 支付方式 -->
			<div class="pay">
				<h4>支付方式</h4>
				<div class="wei" :class="!fu ? 'on':''" @click="fu = !fu">
					<p>
						<span class="iconfont icon-weixin"></span>
						<span>微信支付</span>
					</p>
					<p>微信快捷支付</p>
				</div>
				<div class="zhi" :class="fu ? 'on':''" @click="fu = !fu">
					<p>
						<span class="iconfont icon-zhifubao"></span>
						<span>支付宝支付</span>
					</p>
					<p>支付宝支付</p>
				</div>
			</div>
			<!-- 总价 / 优惠 -->
			<div class="preferential">
				<div class="le">
					<p>商品总价：</p>
					<p>平台优惠卷：</p>
				</div>
				<div class="ri">
					<p>￥{{ zong }}</p>
					<p>暂无优惠卷</p>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="le">
				合计：<span>￥12.50</span>
			</div>
			<div class="ri" @click="jiesuan()">
				立即结算
			</div>
		</div>
		<van-dialog v-model="show" title="提示" show-cancel-button>
			<p style="width: 100%; height: 50px;text-align: center;line-height: 50px;">订单还未提交，确定退出吗？</p>
		</van-dialog>
	</div>
</template>

<script>
	// 顶部组件
	import toptitle from '@/components/top_title.vue'
	import {
		Toast,
		Dialog
	} from 'vant';
	// 收货地址
	import {
		getAddressList
	} from '@/api/user'
	// 订单信息
	import {
		getCartList
	} from '@/api/cart'

	export default {
		name: "settle_accounts",
		components: {
			toptitle
		},
		data() {
			return {
				// 收货地址
				result: [],
				// 订单信息
				list: JSON.parse(localStorage.getItem('arr')),
				fu: true,
				show: false,
			}
		},
		created() {
			getAddressList().then(res => {
				this.result = res.data.result
			})
		},
		methods: {
			jiesuan() {
				Toast.loading({
					message: '订单支付中',
					forbidClick: true,
				});
				setTimeout(() => {
					Toast.fail('无支付接口');
				}, 2000)
			},
			address() {
				this.$router.push('/users/address/Add')
			}
		},
		computed: {
			zong() {
				let num = 0
				this.list.forEach((item) => {
					num += Number(item.pro_num) * Number(item.pro_price)
				})
				return num.toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#settle_accounts {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f5f5;
		overflow: hidden;

		.addresskong {
			width: 100%;
			height: 60px;
			margin-top: 44px;
			background-color: #fff;

			p {
				height: 100%;
				text-align: center;
				line-height: 60px;
				font-size: 16px;
			}
		}

		.address {
			width: 100%;
			height: 75px;
			margin-top: 44px;

			.li {
				padding: 14px 15px;
				display: flex;
				justify-content: space-between;
				background-color: #fff;

				p {
					width: 330px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					span {
						color: #f00;
						margin-right: 5px;
					}
				}
			}
		}

		.content {
			margin-top: 10px;
			margin-bottom: 80px;

			.list {
				margin-top: 10px;

				.li {
					width: 100%;
					height: 310px;
					background-color: #fff;
					padding: 15px;
					margin-bottom: 5px;

					.top {
						display: flex;

						.le {
							margin-right: 15px;

							img {
								width: 65px;
								height: 65px;
							}
						}

						.ri {
							h5 {
								width: 250px;
								font-size: 15px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							p:nth-of-type(2) {
								width: 260px;
								display: flex;
								justify-content: space-between;

								span {
									color: #e93323;
									font-size: 14px;

									.iconfont {
										color: #868686;
										font-size: 13px;
										margin-left: 5px;
									}
								}
							}
						}
					}

					.conter {
						margin-top: 10px;

						li {
							height: 40px;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}

					.bott {
						height: 44px;
						display: flex;
						justify-content: right;
						align-items: center;

						span {
							color: #e93323;
							font-weight: 600;
						}
					}
				}
			}

			.pay {
				width: 100%;
				height: 150px;
				background-color: #fff;
				margin-top: 10px;
				padding: 0 15px;

				h4 {
					line-height: 40px;
					font-size: 15px;
				}

				.zhi,
				.wei {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					height: 44px;
					border: 1px solid #eee;
					margin-bottom: 10px;

					p {
						display: flex;
						align-items: center;

						span:nth-of-type(1) {
							margin-right: 5px;
						}
					}

					p:nth-of-type(2) {
						color: #999;
					}
				}

				.zhi {
					p {

						.iconfont {
							font-size: 25px;
							color: #4295d5;
						}
					}
				}

				.wei {
					p {
						.iconfont {
							width: 25px;
							font-size: 25px;
							color: #41b035;
						}
					}
				}

				.on {
					border: 1px solid #e93323;

					p:nth-of-type(1) {
						span:nth-of-type(2) {
							color: #e93323;
						}
					}

					.iconfont {
						/* 调用动画 */
						animation-name: text;
						/* 持续时间 */
						animation-duration: .3s;
					}
				}

				@keyframes text {

					/*from表示动画的开始位置 也可以使用0%*/
					from {
						font-size: 15px;
					}

					/*to动画的结束位置 也可以使用100%*/
					to {
						font-size: 25px;
					}
				}
			}

			.preferential {
				margin-top: 10px;
				width: 100%;
				height: 80px;
				background-color: #fff;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					line-height: 30px;
					font-size: 15px;
				}

				.ri {
					p {
						text-align: right;
					}

					p:nth-of-type(1) {
						color: #868686;
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 50px;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 15px;
			align-items: center;

			.le {
				span {
					color: #f00;
					font-size: 15px;
				}
			}

			.ri {
				width: 120px;
				height: 36px;
				background-color: #f00;
				border-radius: 20px;
				line-height: 36px;
				text-align: center;
				color: #fff;
				font-size: 16px;
			}
		}
	}
</style>
